<form name="form" class="form-horizontal" role="form" novalidate>
	<div class="modal-header">
	    <h3>Add New Page <i class="fa fa-times pull-right" ng-click="cancel()"></i></h3>
	</div>
	<div class="modal-body">	
		<div class="form-group">
			<label for="page-name" class="col-sm-3 control-label">Name</label>
			<div class="col-sm-7">
				<input id="page-name" name="pageName" class="form-control" type="text" ng-model="page.name" placeholder="Used in menus" ng-disabled="processing" required>
			</div>
			<div class="col-sm-2 error-block" ng-show="form.pageName.$dirty && form.pageName.$invalid">
				<span class="alert alert-danger alert-form" ng-show="form.pageName.$error.required">Required</span>
			</div>
		</div>
		<div class="form-group">
			<label for="page-title" class="col-sm-3 control-label">Title</label>
			<div class="col-sm-7">
				<input id="page-title" name="pageTitle" class="form-control" type="text" ng-model="page.title" placeholder="Used in browser tab and search engines" ng-disabled="processing" required>
			</div>
			<div class="col-sm-2 error-block" ng-show="form.pageTitle.$dirty && form.pageTitle.$invalid">
				<span class="alert alert-danger alert-form" ng-show="form.pageTitle.$error.required">Required</span>
			</div>
		</div>
		<div class="form-group">
			<label for="page-link" class="col-sm-3 control-label">Link</label>
			<div class="col-sm-7">
				<input id="page-link" name="pageLink" class="form-control" type="text" ng-model="page.link" placeholder="Append this to URL to access page" ng-pattern="/^[a-z0-9-_\/]+(\.html|\.htm)?$/" ng-disabled="processing">
			</div>
			<div class="col-sm-2 error-block" ng-show="form.pageLink.$dirty && form.pageLink.$invalid">
				<span class="alert alert-danger alert-form" ng-show="form.pageLink.$error.pattern">Invalid</span>
			</div>
		</div>
		<div class="form-group">
			<label for="page-keywords" class="col-sm-3 control-label">Keywords</label>
			<div class="col-sm-7">
				<input id="page-keywords" name="pageKeywords" class="form-control" type="text" ng-model="page.keywords" placeholder="Comma seperated words (search engines)" ng-disabled="processing">
			</div>
			<div class="col-sm-2 error-block" ng-show="form.pageKeywords.$dirty && form.pageKeywords.$invalid">
				<span class="alert alert-danger alert-form" ng-show="form.pageKeywords.$error.pattern">Invalid</span>
			</div>
		</div>
		<div class="form-group">
			<label for="page-description" class="col-sm-3 control-label">Description</label>
			<div class="col-sm-7">
				<textarea id="page-description" name="pageDescription" class="form-control" ng-model="page.description" rows="3" placeholder="Page description (search engines)" ng-disabled="processing" required></textarea>
			</div>
			<div class="col-sm-2 error-block" ng-show="form.pageDescription.$dirty && form.pageDescription.$invalid">
				<span class="alert alert-danger alert-form" ng-show="form.pageDescription.$error.required">Required</span>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-default pull-left" ng-show="completed" ng-click="addAnother()"><i class="fa fa-plus"></i> Add Another</button>
		<button class="btn btn-primary" ng-show="completed" ng-click="closeAndEdit()"><i class="fa fa-pencil"></i> Edit New Page</button>
		<button type="submit" class="btn btn-success" ng-hide="completed" ng-click="saveNewPage()" ng-disabled="form.$invalid || processing">
			<i class="fa fa-check"></i> 
			Add Page
			<i class="fa fa-spinner fa-spin" ng-show="processing"></i>
		</button>
	</div>
</form>